<template>
  <div>
    <form action="/">
      <van-search
        v-model.trim="keywords"
        show-action
        :placeholder="showKeyword"
        shape="round"
        background="#e4463b"
        @search="search"
        :fixed="true"
        :autofocus="true"
        ref="mySearch"
        v-focus
        @cancel="cancelclose"
      />
    </form>
    <!-- 搜索联想 -->
    <van-cell-group v-if="keywords">
      <van-cell @click="lenovoAdvice(keywords)" :clickable="true">
        <span style="margin-right:10px;color:#96c6ec">搜索</span>
        <span style="color:#96c6ec">“{{ keywords }}”</span>
      </van-cell>
      <van-cell
        :title="item.name"
        icon="search"
        v-for="item in SuggestList"
        :key="item.id"
        @click="lenovoAdvice(item.name)"
        :clickable="true"
      >
        <div slot="title" v-html="highlight(item.name)"></div>
      </van-cell>
    </van-cell-group>
    <div v-else>
      <!-- 歌手分类 -->
      <van-cell
        size="large"
        class="classify"
        :border="false"
        @click="show = true"
      >
        <template #title>
          <van-icon name="contact" class="contact" />
          <span class="custom-title">歌手分类</span>
          <van-icon name="arrow" class="arrow" />
        </template>
      </van-cell>
      <!-- 热门搜索 -->
      <div class="hot">热门搜索</div>
      <div class="hotSearch">
        <van-button
          @click="btnSerach(item.searchWord)"
          class="searchWord"
          type="default"
          round
          size="mini"
          v-for="(item, index) in hotList"
          :key="index"
          >{{ item.searchWord }}</van-button
        >
      </div>
      <!-- 历史记录 -->
      <van-cell-group :border="false">
        <van-cell
          @click="btnSerach(item)"
          :title="item"
          icon="underway-o"
          class="middle"
          center
          v-for="(item, index) in historySearch"
          :key="index"
        >
          <template #right-icon>
            <van-icon name="cross" @click.stop="detelt(index)" />
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 歌手分类弹出层 -->
      <van-popup
        v-model="show"
        position="right"
        :style="{ height: '100%', width: '100%' }"
      >
        <singer-classification @close="show = false" />
      </van-popup>
    </div>
    <!-- 搜索弹窗 -->
    <van-popup
      v-model="isShow"
      position="right"
      :style="{ height: '100%', width: '100%' }"
      :duration="0"
    >
      <sowing-details
        :keywords="keywords"
        @close="close"
        @closeEmpty="closeEmpty"
        v-if="isShow"
      />
    </van-popup>
  </div>
</template>

<script>
import { HotSearch, searchSuggest, searchKeyword } from '@/api/SongSearch'
import { debounce } from 'lodash'
import SowingDetails from './components/SowingDetails.vue'
import SingerClassification from './components/SingerClassification.vue'
export default {
  components: { SowingDetails, SingerClassification },
  data () {
    return {
      keywords: '', // 搜索内容
      hotList: {}, // 热搜列表
      SuggestList: [], // 联想列表
      showKeyword: null, // 搜索关键字
      historySearch: JSON.parse(localStorage.getItem('historySearch')) || [],
      isShow: false, // 弹窗的显示
      show: false // 歌手分类弹出层
    }
  },
  created () {
    // 获取热门搜索
    this.HotSearch()
    // 获取默认搜索关键字
    this.searchKeyword()
  },
  mounted () {},
  methods: {
    // 获取热门搜索
    async HotSearch () {
      const { data } = await HotSearch()
      // console.log(data)
      this.hotList = data
    },
    // 获取默认搜索关键字
    async searchKeyword () {
      const {
        data: { showKeyword }
      } = await searchKeyword()
      this.showKeyword = showKeyword
    },
    // 高亮
    highlight (text) {
      const regExp = new RegExp(this.keywords, 'gi')
      const highlightStr = `<span class="active">${this.keywords}</span>`
      return text.replace(regExp, highlightStr)
    },
    // 点击搜索的时候
    search (value) {
      this.isShow = true
      // 判断有没有重复的
      const index = this.historySearch.indexOf(value)
      if (index !== -1) {
        this.historySearch.splice(index, 1)
      }
      this.historySearch.unshift(value)
      localStorage.setItem('historySearch', JSON.stringify(this.historySearch))
    },
    // 点击历史记录的X删除
    detelt (index) {
      // console.log(index)
      this.historySearch.splice(index, 1)
      localStorage.setItem('historySearch', JSON.stringify(this.historySearch))
    },
    // 点击热门搜索
    btnSerach (value) {
      // console.log(value)
      this.keywords = value
      this.isShow = true
      this.$refs.mySearch.querySelector('.van-field__control').focus()
    },
    // 子组件回退按钮
    close () {
      this.keywords = ''
      this.isShow = false
    },
    // 子组件聚焦的时候的自定义事件
    closeEmpty (event) {
      this.isShow = false
      this.keywords = event
      // console.log(this.$refs.mySearch)
      // 自动聚焦
      this.$refs.mySearch.querySelector('.van-field__control').focus()
    },
    // 联想建议的点击
    lenovoAdvice (value) {
      console.log(value)
      this.isShow = true
      this.keywords = value
    },
    cancelclose () {
      this.$router.back()
    }
  },

  // 获取联想列表
  watch: {
    keywords: {
      handler: debounce(async function (keywords) {
        if (this.keywords) {
          try {
            const {
              result: { albums }
            } = await searchSuggest(keywords)
            this.SuggestList = albums
          } catch (error) {
            this.$toast('获取联想建议失败')
            console.log(error)
          }
        }
      }, 500),
      immediate: true,
      deep: true
    }
  }
}
</script>

<style scoped lang="less">
.van-field__control,
.van-search__content--round {
  background: #e46860;
}
.van-search__action {
  color: #fff;
}

/deep/.van-icon-search {
  color: #dcd0d4;
}
.classify {
  text-align: center;
}
.contact,
.arrow {
  vertical-align: middle;
  margin-left: 10px;
}
.contact {
  margin-right: 10px;
}
.custom-title {
  font-size: 28px;
}
.van-cell--large {
  border-bottom: 1px solid #e2e3e5;
}
.hot {
  font-size: 24px;
  margin: 24px 0 0 36px;
}
.middle {
  border-bottom: 1px solid #e2e3e5;
  margin-top: 20px;
}
.searchWord {
  height: 60px;
  line-height: 40px;
  text-align: center;
  font-size: 28px;
  padding: 0 20px;
  margin-left: 38px;
}
/deep/.active {
  color: red;
}
/deep/.van-field__control {
  color: #fff;
}
/deep/ .van-popup--right {
  background: #e2e3e5 !important;
}
</style>
